import uCharts from '@/js_sdk/u-charts/u-charts.js';

const uchartUtils = {
	//绘制折线图
	drawLineCharts : function(ctx,cWidth,cHeight,dataX,dataY,title){
		var result = new uCharts({
			type: "line",
			context: ctx,
			width: cWidth,
			height: cHeight,
			categories: dataX,
			series:[{name:title,data:dataY}],
			animation: true,
			background: "#FFFFFF",
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [15,10,0,15],
		    enableScroll: true,
			dataLabel:false,
			legend: {show:false},
			xAxis: {
			  disableGrid: true,
			  scrollShow: true,				//支持横行拖动
			  itemCount:7
			},
			yAxis: {
			  gridType: "dash",
			  dashLength: 2
			},
			extra: {
			  line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			  }
			}
		});
		return result;
	},

	drawColumnCharts : function(ctx,cWidth,cHeight,dataX,dataY,title){
		var result = new uCharts({
			type: "column",
			context: ctx,
			width: cWidth,
			height: cHeight,
			categories:dataX,
			series:[{name:title,data:dataY}],
			animation: true,
			background: "#FFFFFF",
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [15,15,0,5],
			touchMoveLimit: 24,
			enableScroll: true,
			dataLabel:false,
			legend: {show:false},
			xAxis: {
			  disableGrid: true,
			  scrollShow: true,
			  itemCount: 7
			},
			yAxis: {
			  data: [
				{
				  min: 0
				}
			  ]
			},
			extra: {
			  column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			  }
			}
		});
		return result;
	},
	//饼形图
	/*
		data:[{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
	*/
	drawPieCharts : function(ctx,cWidth,cHeight,data){
		var result = new uCharts({
			type: "pie",
			context: ctx,
			width: cWidth,
			height: cHeight,
			series: [{data:data}],
			animation: false,
			background: "#FFFFFF",
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [5,5,5,5],
			enableScroll: false,
			legend: {show:true},
			extra: {
			  pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			  }
			}
		});
		return result;
	},
	//圆形进度条
	drawArcbarCharts : function(ctx,cWidth,cHeight,seriesValue){
		var result = new uCharts({
			type: "arcbar",
			context: ctx,
			width: cWidth,
			height: cHeight,
			series: [{
				name:seriesValue.name,
				data:seriesValue.data
			}],
			animation: false,
			background: "#FFFFFF",
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: undefined,
			title: {
			  name: seriesValue.data + "%",
			  fontSize: 12,
			  color: "#2fc25b"
			},
			subtitle: {
			  name: seriesValue.name,
			  fontSize: 14,
			  color: "#666666"
			},
			extra: {
			  arcbar: {
				type: "default",
				width: 12,
				backgroundColor: "#E9E9E9",
				startAngle: 0.75,
				endAngle: 0.25,
				gap: 2,
				linearType: "custom"
			  }
			}
		});
		return result;
	}
}

module.exports = uchartUtils